<!-- components/MetricCard.vue -->
<template>
  <div class="metric-card" :class="`metric-card-${type}`">
    <div class="metric-header">
      <div class="metric-title">{{ title }}</div>
      <el-icon :class="iconClass">
        <component :is="iconComponent" />
      </el-icon>
    </div>
    <div class="metric-value" v-if="!isRiskCard">
      {{ value }}
      <div v-if="trend !== undefined" class="metric-trend">
        <span class="trend-label">{{ trendLabel }}:</span>
        <span :class="trend >= 0 ? 'trend-up' : 'trend-down'">
          {{ trend >= 0 ? "+" : "" }}{{ trend }}
        </span>
      </div>
      <div v-if="growthRate !== undefined" class="metric-growth">
        <span :class="growthRate >= 0 ? 'growth-up' : 'growth-down'">
          {{ growthRate >= 0 ? "↑" : "↓" }} {{ growthRate }}% vs上期
        </span>
      </div>
    </div>
    <div class="risk-values" v-if="isRiskCard">
      <div class="risk-item high-risk">
        <span class="risk-label">高危:</span>
        <span class="risk-value">{{ highRisk }}</span>
      </div>
      <div class="risk-item medium-risk">
        <span class="risk-label">中危:</span>
        <span class="risk-value">{{ mediumRisk }}</span>
      </div>
      <div class="risk-item low-risk">
        <span class="risk-label">低危:</span>
        <span class="risk-value">{{ lowRisk }}</span>
      </div>
    </div>
    <div class="efficiency-values" v-if="isEfficiencyCard">
      <div class="efficiency-item">
        <span class="efficiency-label">处理率:</span>
        <span class="efficiency-value">{{ processingRate }}%</span>
      </div>
      <div class="efficiency-item">
        <span class="efficiency-label">平均:</span>
        <span class="efficiency-value">{{ avgTime }}天</span>
      </div>
      <div class="efficiency-item">
        <span class="efficiency-label">准时率:</span>
        <span class="efficiency-value">{{ onTimeRate }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { Box, Warning, Clock } from "@element-plus/icons-vue";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  value: {
    type: String,
    default: "",
  },
  trend: {
    type: Number,
    default: undefined,
  },
  trendLabel: {
    type: String,
    default: "新增",
  },
  growthRate: {
    type: Number,
    default: undefined,
  },
  highRisk: {
    type: Number,
    default: 0,
  },
  mediumRisk: {
    type: Number,
    default: 0,
  },
  lowRisk: {
    type: Number,
    default: 0,
  },
  processingRate: {
    type: Number,
    default: 0,
  },
  avgTime: {
    type: Number,
    default: 0,
  },
  onTimeRate: {
    type: Number,
    default: 0,
  },
  icon: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "primary",
    validator: (value: string) => {
      return ["primary", "success", "warning", "info"].includes(value);
    },
  },
});

const isRiskCard = computed(() => {
  return typeof props.title === "string" && props.title.includes("风险");
});

const isEfficiencyCard = computed(() => {
  return typeof props.title === "string" && props.title.includes("处理效率");
});

const iconClass = computed(() => {
  return `icon-${props.type}`;
});

const iconComponent = computed(() => {
  switch (props.icon) {
    case "el-icon-box":
      return Box;
    case "el-icon-warning":
      return Warning;
    case "el-icon-clock":
      return Clock;
    default:
      return Box;
  }
});
</script>

<style scoped lang="scss">
.metric-card {
  flex: 1;
  min-width: 250px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  .metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .metric-title {
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }

    .el-icon {
      font-size: 24px;
    }

    .icon-primary {
      color: #409eff;
    }

    .icon-success {
      color: #52c41a;
    }

    .icon-warning {
      color: #faad14;
    }

    .icon-info {
      color: #1890ff;
    }
  }

  .metric-value {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
    line-height: 1.2;
  }

  .metric-trend {
    font-size: 12px;
    color: #666;
    margin-bottom: 3px;

    .trend-label {
      margin-right: 5px;
    }

    .trend-up {
      color: #f5222d;
    }

    .trend-down {
      color: #52c41a;
    }
  }

  .metric-growth {
    font-size: 12px;

    .growth-up {
      color: #f5222d;
    }

    .growth-down {
      color: #52c41a;
    }
  }

  .risk-values {
    margin-top: 15px;

    .risk-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      padding: 4px 0;

      .risk-label {
        color: #666;
        font-weight: 400;
      }

      .risk-value {
        font-weight: 600;
        font-size: 16px;
      }
    }

    .high-risk .risk-value {
      color: #f5222d;
    }

    .medium-risk .risk-value {
      color: #faad14;
    }

    .low-risk .risk-value {
      color: #52c41a;
    }
  }

  .efficiency-values {
    margin-top: 15px;

    .efficiency-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      padding: 4px 0;

      .efficiency-label {
        color: #666;
        font-weight: 400;
      }

      .efficiency-value {
        font-weight: 600;
        font-size: 16px;
        color: #52c41a;
      }
    }
  }
}

.metric-card-primary {
  border-left: 4px solid #409eff;
}

.metric-card-success {
  border-left: 4px solid #52c41a;
}

.metric-card-warning {
  border-left: 4px solid #faad14;
}

.metric-card-info {
  border-left: 4px solid #1890ff;
}
</style>
